<template>
  <div class="home">
    <div class="box-main" :class="isDark ? 'change-main':'change-white'">
      <el-button @click="toggleTheme">切换主题</el-button>
    </div>
  </div>
</template>

<script>


export default {
  name: 'HomeView',
  data() {
    return {
      isDark: false
    };
  },
  methods: {
    toggleTheme() {
      this.isDark = !this.isDark;
      // 切换主题时动态设置 `theme` 属性
      if (this.isDark) {
        window.document.documentElement.setAttribute('theme', 'dark');
      } else {
        window.document.documentElement.setAttribute('theme', 'light');
      }
    }
  }
}
</script>

<style scoped lang="scss">
.box-main{
  width: 100%;
  height: 100vh;
  background: var(--baseColor);

}
.change-main{
  animation: linear 1s theme-change;
}
.change-white{
  animation: linear 1s f-theme-change;
}

</style>
